<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center login_flex_0" @tap.stop="handleJumpDiy"
        data-type="back" data-url="1" :style="{top:(30+StatusBarRpx)+'rpx', }">
        <text class='fu-iconfont2  login_fd0_0'>&#xe794;</text>

      </view>
      <view :style="{height: ''}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout login_flex_1">
        <view class='flex flex-wrap align-center justify-center login_fd1_0'>
          <image class='login_fd1_0_c0' mode="aspectFit" :src='STATIC_URL+"222.png"'></image>
        </view>
        <view class='flex flex-wrap align-center login_fd1_1'>
          <image class='login_fd1_1_c0' mode="aspectFit" :src='STATIC_URL+"230.png"'></image>
          <benben-input class='flex-sub login_fd1_1_c1' type="number" :placeholder="$t('请输入手机号')" confirm-type="done"
            :maxlength="11" placeholder-style="color:#999;font-size:32rpx" v-model="account" />
        </view>
        <view class='flex flex-wrap align-center login_fd1_2'>
          <image class='login_fd1_1_c0' mode="aspectFit" :src='STATIC_URL+"231.png"'></image>
          <benben-flex-password-diy v-model="password" class-name="flex align-center flex login_fd1_2_c1"
            :placeholder="$t('请输入密码(6~12位字母+数字)')" :maxlength="12" :default-type='true'
            placeholder-style="color:#999;font-size:32rpx">
            <template #show>
              <text class='fu-iconfont2  login_fd1_2_c1_icon1' data-type="show">&#xE837;</text>
            </template>
            <template #hide>
              <text class='fu-iconfont2  login_fd1_2_c1_icon1' data-type="hide">&#xEBCC;</text>
            </template>
          </benben-flex-password-diy>
        </view>
        <view class='flex flex-direction-row-reverse flex-wrap align-center login_fd1_3'>
          <text class='login_fd1_3_c0' @tap.stop="handleJumpDiy" data-type="redirectTo"
            :data-url="`/pages/dlzc/verificationLogin/verificationLogin`">{{$t('验证码登录')}}</text>
        </view>
        <button class='login_fd1_4' @tap.stop="onlogonFunc()">{{$t('登录')}}</button>
        <view class='flex flex-wrap align-center justify-center login_fd1_5'>
          <text class='login_fd1_5_c0' @tap.stop="handleJumpDiy" data-type="redirectTo"
            :data-url="`/pages/dlzc/register/register`">{{$t('注册账号')}}</text>

          <view class='flex  login_fd1_5_c1'></view>

          <text class='login_fd1_5_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
            :data-url="`/pages/dlzc/forgetPasswords/forgetPasswords`">{{$t('忘记密码')}}</text>
        </view>
        <view class='flex flex-direction align-center login_fd1_6'>
          <!-- <view class='flex flex-wrap align-center justify-center login_fd1_6_c0'>

            <view class='flex  login_fd1_6_c0_c0'></view>

            <text class='login_fd1_6_c0_c1'>{{$t('快捷登录')}}</text>

            <view class='flex  login_fd1_6_c0_c0'></view>

          </view> -->
          <!-- <view class='flex flex-wrap align-center justify-center login_fd1_3'>
            <image class='login_fd1_6_c1_c0' mode="aspectFit" :src='STATIC_URL+"2.png"' @tap.stop="wxLoginFunc()">
            </image>
          </view> -->
          <view class='flex flex-wrap align-center login_fd1_6_c2'>
            <benben-flex-switch-new class-name='flex flex' v-model="id_tk" :disabled='false'>
              <template v-slot:checked>

                <view class='flex flex position-relative align-center'>
                  <image class='login_checkfd1_6_c2_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"3.png"'></image>
                </view>

              </template>
              <template v-slot:unchecked>

                <view class='flex flex position-relative justify-end align-center'>
                  <image class='login_noCheckfd1_6_c2_c0_c1_c0' mode="aspectFit" :src='STATIC_URL+"213.png"'></image>
                </view>

              </template>
            </benben-flex-switch-new>
            <text class='login_fd1_6_c2_c1'>{{$t('已阅读并同意')}}</text>
            <text class='login_fd1_6_c2_c2' @tap.stop="handleJumpDiy" data-type="navigateTo"
              :data-url="`/pages/dlzc/agreements/agreements`">{{$t('《用户注册协议》')}}</text>
            <text class='login_fd1_6_c2_c3'>{{$t('与')}}</text>
            <text class='login_fd1_6_c2_c2' @tap.stop="handleJumpDiy" data-type="navigateTo"
              :data-url="`/pages/dlzc/privacyPolicy/privacyPolicy`">{{$t('《隐私政策》')}}</text>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->


    </view>
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js';
  import md5 from 'js-md5';
  export default {
    components: {},


    data() {
      return {
        "id_tk": false,
        "dataList": {
          "userinfo": {
            "user_token": "",
            "id": "",
            "avatar": "",
            "real_name": "",
            "nickname": "",
            "email": "",
            "gender": "",
            "mobile": "",
            "birthday": "",
            "client_id": "",
            "phone": ""
          }
        },
        "password": "",
        "account": "",
        "ceshi_token": "2e99466f-3475-9f76-2ed2-a69cbdf9434b"
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      //登录
      async onlogonFunc() {
        if (!validate(this.account, 'require')) {
          this.$message.info(global.i18n.t('请输入手机号'));
          return false;
        }
        if (!validate(this.account, 'phone')) {
          this.$message.info(global.i18n.t('请输入正确的手机号'));
          return false;
        }
        if (!validate(this.password, 'require')) {
          this.$message.info(global.i18n.t('请输入密码'));
          return false;
        }
        if (!validate(this.password, 'password')) {
          this.$message.info(global.i18n.t('请输入正确的密码（6~12位字母+数字）'));
          return false;
        }
        if (this.id_tk === false) {
          this.$message.info(global.i18n.t('请勾选协议'));
          return false;
        }
        //请求方法
        //数据验证
        // let tel = this.$util.rsaPublicData(this.account)
        let datadataList = await this.$api.get(global.apiUrls.appLoginPass, {
          telPhone: this.account,
          typeapp: '1',
          password: md5(this.password)
        });
        if (!datadataList) return
        if (datadataList.data.code != 0) {
          this.$message.info(datadataList.data.msg);
          return
        }
        let infodataList = datadataList.data;
        this.dataList = infodataList.data

        this.$store.commit('saveToken', this.dataList.token)
        this.$store.commit('updateUserInfo', this.dataList)
        uni.showToast({
          title: global.i18n.t('登录成功'),
          mask: true,
          icon: 'none',
          duration: 1500
        });
        setTimeout(() => {
          this.$urouter.switchTab(`/pages/tabBar/home/home`);
        }, 500)
      },
      //项目预览勿删
      yulanFunc() {
        this.$store.commit('saveToken', this.ceshi_token)
      },
      //微信授权登录
      wxLoginFunc() {
        if (!this.id_tk) {
          this.$message.info(global.i18n.t('请勾选协议'));
          return false;
        }
        let _this = this;
        // #ifdef APP-PLUS
        if (
          plus.runtime.isApplicationExist({
            pname: "com.tencent.mm",
            action: "weixin://",
          })
        ) {
          uni.getProvider({
            service: "oauth",
            success: function(res) {
              console.log(res, ~res.provider.indexOf("weixin"));
              // 如果支持微信等，就执行 wx_login_fnFunc 方法
              if (~res.provider.indexOf("weixin")) {
                _this.wx_login_fnFunc('weixin');
              }
            },
            fail: function(err) {
              // api错误是打印错误
              console.log(err);
            },
          });
        } else {
          // 调起失败时提醒用户
          uni.showToast({
            title: global.i18n.t('请安装微信后再使用此功能'),
            mask: true,
            icon: 'none',
            duration: 1500
          });
        }
        // #endif
      },
      //wx_login_fn方法
      wx_login_fnFunc(type) {
        console.log(type);
        let _this = this;
        let code = ''
        uni.login({
          provider: type,
          success: (loginRes) => {
            console.log('uni.login success-----', loginRes);
            // code = red.code
            uni.getUserInfo({
              provider: type,
              success: (infoRes) => {
                console.log('uni.getUserInfo success-----', infoRes);
                uni.showLoading({
                  title: "加载中...",
                });
                console.log('getUserInfo===', infoRes);
                let {
                  nickName,
                  avatarUrl,
                  gender,
                  unionId,
                  openId
                } = infoRes.userInfo;
                console.log(JSON.stringify({
                  openid: openId,
                  unionid: unionId
                }));
                _this.$api.post(global.apiUrls.addUserInfoAppWxOpenId, {
                    // extend_info: JSON.stringify({
                    //   openid: openId,
                    //   unionid: unionId
                    // }),
                    // third_type: 'wx_app'
                    openid: openId,
                    unionid: unionId
                  })
                  .then(res => {
                    console.log('授权返回信息===', res);
                    res = res.data;
                    uni.hideLoading();
                    if (res.code == 0) {
                      console.log('jiekou fanhu', res.data)
                      if (res.data.isTelPhone == 0) {
                        _this.$urouter.navigateTo(
                          `/pages/dlzc/phoneNumber/phoneNumber?id=${res.data.id}`);
                      } else {
                        _this.$store.commit('updateUserInfo', res.data);
                        _this.$store.commit('saveToken', res.data.token)
                        setTimeout(() => {
                          this.$urouter.switchTab(`/pages/tabBar/home/home`);
                        }, 800);
                      }
                      return;
                      if (res.data.result) { //// 如果后台返回来的是 result 字段,表示此账号还没有绑定过手机号 跳转到绑定手机号页面
                        let info = {
                          unionid: unionId,
                          openid: openId,
                          gender: 0,
                          nickname: nickName,
                          avatar: avatarUrl,
                          code: code
                        }
                        uni.setStorageSync('Wxinfo_tmp', JSON.stringify(info));
                        _this.$urouter.navigateTo('/pages/dlzc/phoneNumber/phoneNumber');
                      } else if (res.data.userinfo) { // 如果后台返回的是 userinfo 字段,表示已经登录成功,把用户信息存到 store 中,
                        _this.$message.info(res.msg);
                        _this.$store.commit('updateUserInfo', res.data.userinfo);
                        _this.$store.commit('saveToken', res.data.userinfo.user_token)
                        setTimeout(() => {
                          this.$urouter.switchTab(`/pages/tabBar/home/home`);
                        }, 800);
                      }

                    } else if (res.code == -999) { // // 服务器解析参数错误
                      uni.hideLoading();
                      this.$message.info(result.msg);
                    } else if (res.code == -1) {
                      _this.$message.info(res.msg);
                      return
                    }
                  })
                  .catch(err => {
                    uni.hideLoading();
                    console.log(err);
                  });
              }
            });
          },
          fail: function(err) {
            uni.hideLoading();
            console.log(err);
          },
          complete(res) {
            console.log(res);
          }
        });
      },
      //getProvider方法
      getProviderFunc() {
        uni.getProvider({
          service: 'oauth',
          success: res => {
            const _provider = providers.filter(item => res.provider.includes(item.type));
            this.providers = _provider;
          }
        });
      },
      //手机号是否存在
      async mobileCunzaiFunc() {
        //请求方法
        //数据验证

        let data65669597654e4 = await this.$api.post(global.apiUrls.post65669597654e4, {
          mobile: this.account
        });

        if (data65669597654e4.data.code != 1) {
          this.$message.info(data65669597654e4.data.msg);
          return
        }



      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: var(--benbenbgColor1);
    background-size: 100% auto;
  }

  .login_flex_0 {
    overflow: hidden;
    z-index: 10;
    top: 30rpx;
    left: 32rpx;
  }

  .login_fd0_0 {
    font-size: 36rpx;
  }

  .login_flex_1 {
    padding: 0rpx 56rpx 0rpx 56rpx;
  }

  .login_fd1_6_c2_c3 {
    color: var(--benbenFontColor2);
    font-size: 28rpx;
    font-weight: 400;
    line-height: 33rpx;
  }

  .login_fd1_6_c2_c2 {
    color: rgba(0, 137, 255, 1);
    font-size: 28rpx;
    font-weight: 400;
    line-height: 33rpx;
  }

  .login_fd1_6_c2_c1 {
    color: var(--benbenFontColor2);
    font-size: 28rpx;
    font-weight: 400;
    line-height: 33rpx;
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .login_noCheckfd1_6_c2_c0_c1_c0 {
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    width: 30rpx;
    height: 30rpx;
  }

  .login_checkfd1_6_c2_c0_c0_c0 {
    width: 30rpx;
    height: 30rpx;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
  }

  .login_fd1_6_c2 {
    margin: auto 0rpx 40rpx 0rpx;
  }

  .login_fd1_6_c1_c0 {
    width: 48rpx;
    height: 48rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .login_fd1_6_c0_c1 {
    color: var(--benbenFontColor2);
    font-size: 26rpx;
    font-weight: 400;
    line-height: 37rpx;
    margin: 0rpx 10rpx 0rpx 10rpx;
  }

  .login_fd1_6_c0_c0 {
    background: #EEEEEE;
    width: 156rpx;
    height: 1rpx;
    margin: 10rpx 0rpx 10rpx 0rpx;
    transform: scaleY(0.5);
    border-radius: 1rpx 1rpx 1rpx 1rpx;
  }

  .login_fd1_6_c0 {
    margin: 40rpx 0rpx 0rpx 0rpx;
  }

  .login_fd1_6 {
    background: var(--benbenbgColor1);
    position: fixed;
    bottom: calc(0rpx + var(--window-bottom));
    left: 0rpx;
    width: 750rpx;
    height: 28vh;
    background-size: 100% auto;
  }

  .login_fd1_5_c1 {
    background: rgba(153, 153, 153, 1);
    width: 1rpx;
    height: 20rpx;
    margin: 0rpx 20rpx 0rpx 20rpx;
    transform: scaleX(0.5);
  }

  .login_fd1_5_c0 {
    color: var(--benbenFontColor2);
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
  }

  .login_fd1_5 {
    margin: 34rpx 0rpx 0rpx 0rpx;
  }

  .login_fd1_4 {
    background: var(--benbenbgColor7);
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    font-size: 32rpx;
    color: var(--benbenFontColor3);
    width: 638rpx;
    height: 88rpx;
    line-height: 88rpx;
    margin: 48rpx 0rpx 0rpx 0rpx;
  }

  .login_fd1_3_c0 {
    color: var(--benbenFontColor8);
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
  }

  .login_fd1_3 {
    margin: 32rpx 0rpx 0rpx 0rpx;
  }

  .login_fd1_2_c1_icon1 {
    width: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 40rpx;
  }

  ::v-deep .login_fd1_2_c1 {
    height: 45rpx;
    font-size: 32rpx;
    margin: 0rpx 0rpx 0rpx 32rpx;
    line-height: 40rpx;
    font-weight: 400;
    color: var(--benbenFontColor0);
    width: 560rpx;
  }

  .login_fd1_2 {
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    margin: 0rpx 0rpx 0rpx 0rpx;
    padding: 40rpx 0rpx 40rpx 0rpx;
  }

  .login_fd1_1_c1 {
    color: var(--benbenFontColor0);
    font-size: 32rpx;
    font-weight: 400;
    line-height: 40rpx;
    margin: 0rpx 0rpx 0rpx 32rpx;
    height: 45rpx;
  }

  .login_fd1_1_c0 {
    width: 34rpx;
    height: 34rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .login_fd1_1 {
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    margin: 80rpx 0rpx 0rpx 0rpx;
    padding: 40rpx 0rpx 40rpx 0rpx;
  }

  .login_fd1_0_c0 {
    width: 180rpx;
    height: 180rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .login_fd1_0 {
    margin: 140rpx 0rpx 0rpx 0rpx;
  }
</style>
